<template>
	<div style="">
		<el-scrollbar style="height:100%">
			<div class="main">
				<div class="page page1" style="display: flex;justify-content: center;">
					<div style="width: 1100px;z-index: 100;position: absolute;top: 180px;">
						<el-row :gutter="24" style=" display: flex; align-items: center;" >
							<el-col :span="12" style="display: flex; align-items: center;justify-content: space-between;">
								<img class="login_logo" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item0-2.png" />
								<img  class="line" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/middle_line.png" />
							</el-col>
							<el-col :span="12" style="display: flex;justify-content: center;">
									<div class="login_inp">
										<div style="padding: 40px;">
											<el-form :model="uFrom" >
												<el-form-item>
													<el-input placeholder="百朗账号" clearable v-model="uFrom.account"></el-input>
												</el-form-item>
												<el-form-item>
													<el-input placeholder="百朗密码" type="password" show-password v-model="uFrom.password"></el-input>
												</el-form-item>
												<el-form-item>
														 <el-card v-show="show"  class="yan" shadow="always">
														     <slide-verify :l="42"
																 :r="10"
																 :w="310"
																 :h="155"
																 slider-text="向右滑动"
																 @success="onSuccess"
																 @fail="onFail"
																 @refresh="onRefresh"
																 ></slide-verify>
														     <div>{{msg}}</div>
														</el-card>
													<el-button class="btn" @click="showbtn">{{verify}}</el-button>
												</el-form-item>
												
												<el-form-item>
													<div class="dis">
														<el-checkbox class="hui66" v-model="uFrom.checked">记住账号密码</el-checkbox>
													</div>
												</el-form-item>
												<el-form-item>
													<el-button class="btnc" @click="ringUp">登录</el-button>
												</el-form-item>
											</el-form>
										</div>
									</div>
								</el-col>
							</el-row>
					</div>
				
				</div>
				
				<!-- end -->
				<div class="login_video center">
					<div class="login_biao hui66 center">让学员爱上你的课</div>
				    <video  objectFit="fill"  :src="VideoSrc" class="video"></video>
				</div>
				<!-- end -->
				<div class="login_video1 center">
					<div class="login_biao hui66 center" style="padding-top: 60px;">强大的微课制作功能，创造生动有趣的微课</div>
			
					  <!-- 我的代码 -->
					<transition name="fade">
						  <div 
						    @touchend='end' 
							@touchstart='start' 
						    @touchmove='move' 
							class="swiper" style="margin-top: 60px;">
							<div @click="chooseItem(item,index)" v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover">
							  <img :src="item.cover" style="width: 100%; height: 100%; border-radius: 10px;">
							</div>
						  </div>
					</transition>
					<!-- <h1 @click="prev">上一个</h1>
					<h1 @click="next">下一个</h1> -->
					<p class="hui66" style="font-size: 20px;">{{ centerInfo.id }}</p>
				</div>
				<!-- end -->
				<div class="login_gif  " >
					<div class="login_biao hui66 center" style="padding-top: 60px;">课堂游戏让课堂更欢乐</div>
					<div style="width: 64%;margin: 0 auto;">
						<p style="color: #666666;font-size: 20px;">{{text}}</p>
					</div>
				    <div class="center">
						<img style="width: 854px; height: 434px; margin-top: 60px;" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/images/course_game.gif" />
					</div>
				</div>
				<!-- end -->
				<div class="login_gif ">
					<div class="login_biao hui66 center" style="padding-top: 60px;">轻松制作你的微课动画</div>
				    <div style="margin: 0 auto; width: 63%; margin-top: 60px;">
						<div class="flex">
							<div class="login_LiImg" v-for="(item,index) in dataList" :key="index">
								<img :src="item.img" />
								<div class="hui66 wen">
									<p style="font-size: 22px;">{{item.name}}</p>
									<div style="font-size: 16px;">{{item.title}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end -->
				<div class="login_xiao">
					<div style="width: 65%; margin: 0 auto;">
						<el-row :gutter="24" class="align-items">
							<el-col :span="12" >
								<div style="width: 84%;">
									<div class="hui66" style="font-size: 30px; margin-bottom: 30px;">
										<div>丰富的模板和素材</div>
										<div>帮你快速制作出专业课程</div>
									</div>
									<div style="font-size: 21px; color: #666666;">
										来做课提供丰富的高质量的现成模板，用户只需要通过简单的拖放就能快速制作出专业的视频、游戏课程。
									</div>
								</div>
							</el-col>
							<el-col :span="12" >
								<img style="width: 100%;" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item3.png" />
							</el-col>
						</el-row>
					</div>
				</div>
				<!-- end -->
				<div class="login_xiao">
					<div style="width: 65%; margin: 0 auto;">
						<el-row :gutter="24" class="align-items">
							<el-col :span="12" >
								<img style="width: 100%;" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item4.png" />
							</el-col>
							<el-col :span="12" >
								<div style="width: 84%;margin-left: 16%;">
									<div class="hui66" style="font-size: 30px; margin-bottom: 30px;">
										<div>灵活的时间轴</div>
										<div>帮你制作视频化课程</div>
									</div>
									<div style="font-size: 21px; color: #666666;">
										通过视频形式向学员解释知识，被证明是远比文字、图片音频更有效的方式。时间轴可以设置每个时间点显示的内容，配合各种动画特效，给你带来更多、更广阔的知识解释能力。
									</div>
								</div>
							</el-col>
							
						</el-row>
					</div>
				</div>
				<!-- end -->
				<div class="login_xiao">
					<div style="width: 65%; margin: 0 auto;">
						<el-row :gutter="24" class="align-items">
							<el-col :span="12" >
								<div style="width: 80%;">
									<div class="hui66" style="font-size: 30px; margin-bottom: 30px;">
										<div>在课件中任何位置插入测试题</div>
									</div>
									<div style="font-size: 21px; color: #666666;">
										可以通过视频、图文以及音频讲解组合成一门微课，并且可以在该微课的任何的位置插入测试题。学生答题后通过后台的数据报表，可以帮助老师跟踪学员的知识掌握情况。
									</div>
								</div>
							</el-col>
							<el-col :span="12" >
								<img style="width: 100%;" src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item5.png" />
							</el-col>
						</el-row>
					</div>
				</div>
				<!-- end -->
			</div>
			<div class="center login_top" >
				<p class="hui66" style="font-size: 34px;">一键快速发布课程</p>
				<div class="hui66" style="font-size: 24px;">
					<div>可以快速讲课程发布到百朗</div>
					<div>让学员随时随地的在手机上进行学习</div>
				</div>
				<div class="login_top">
					<img src="../../assets/img/8.png" style="width: 204px; height: 204px;" />
				</div>
			</div>
			<!-- end -->
			<!-- bottom -->
			<div style="background: #F3F4F6;">
				<div class="center" style="font-size: 34px; color: #666666;padding-top: 60px;">他们正在使用来做课</div>
				<el-carousel  arrow="always"  class="login_top" style="width: 900px; margin: 0 auto; ">
				     <el-carousel-item  v-for="(i,k) in lun" :key="k">
						<div class="box">
							 <div class="lineF">
								<div class="boxF" v-for="(item,index) in dataImg1" :key="index">
									<div class="boxS" >
										<div class="boxT" >
											<img :src="item.img" />
											<div class="overlay">
												<a href="#">+</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--第二行(lineSecond)-->
							<div class="lineS">
								<div class="boxF" v-for="(item,index) in dataImg" :key="index">
									<div class="boxS">
										<div class="boxT" >	
										<img :src="item.img" />
											<div class="overlay">
												<a href="#">+</a>
											</div>
										</div>
									</div>
								</div>
							   
							</div>
						</div>
				     </el-carousel-item>
				</el-carousel>
			</div>
		
			
		</el-scrollbar>
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uFrom:{
					account:'',
					password:'',
					checked:false,
				},
				msg: '',
				show:false,
				// 验证
				verify:'点击按钮进行验证',
				//视频地址
				VideoSrc:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
			
				text:'老师创建答题游戏并投影到大屏幕上，所有学生都可以通过手机扫码参加，该功能可以应用到新员工培训、销售培训、以及数学英语等课堂上。游戏理念已倾注到每一个细节，头像、连胜统计、排行榜、音乐和领奖台。让学生在课堂上始终对学习游戏持续保持浓厚的兴趣。',
				dataList:[
					{
						img:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item2-img0.png',
						name:'讲产品',
						title:'新产品面临上市、老产品面临升级，用来做课快速把产品知识生动的讲明白'
					},
					{
						img:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item2-img1.png',
						name:'讲产品',
						title:'新产品面临上市、老产品面临升级，用来做课快速把产品知识生动的讲明白'
					},
					{
						img:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item2-img2.png',
						name:'讲产品',
						title:'新产品面临上市、老产品面临升级，用来做课快速把产品知识生动的讲明白'
					},
					{
						img:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/item2-img3.png',
						name:'讲产品',
						title:'新产品面临上市、老产品面临升级，用来做课快速把产品知识生动的讲明白'
					}
				],
				loading: true,
				            currentIndex: 3, //当前中间imgs数组中index
				            centerInfo: '', // 当前中间信息
				            startX: '',
				            endX: '',
				            imgs: [
				                {
				                    id: '旅行青蛙的火爆真相',
				                    index: 0,
				                    cover:
				                        'https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg'
				                },
				                {
				                    id: '安娜2',
				                    index: 1,
				                    cover:
				                        'https://pic3.zhimg.com/v2-7dbfb691e8e0c295c638a3ba863ffea2_b.jpg'
				                },
				                {
				                    id: '卢西奥3',
				                    index: 2,
				                    cover:
				                        'https://pic3.zhimg.com/80/v2-f6ad5d21fda1459e4aa44fe0d6d644f6_720w.jpg'
				                },
				                {
				                    id: 'DVA4',
				                    index: 3,
				                    cover:
				                        'https://pic2.zhimg.com/80/v2-71d88f535a5acd1731d56ef6f8ce1175_720w.jpg'
				                },
				                {
				                    id: '莫伊拉5',
				                    index: 4,
				                    cover:
				                        'https://pic1.zhimg.com/80/v2-0f3f99b94b80490a11fb867014565920_720w.jpg'
				                },
				                {
				                    id: '裂空6',
				                    index: 5,
				                    cover:
				                        'https://pic1.zhimg.com/80/v2-d0e9e3d52a9c08553a4e7e71360404fc_720w.jpg'
				                },
				                {
				                    id: '麦克雷7',
				                    index: 6,
				                    cover:
				                        'https://pic3.zhimg.com/80/v2-f6ad5d21fda1459e4aa44fe0d6d644f6_720w.jpg'
				                },
				                {
				                    id: '士兵76  8',
				                    index: 7,
				                    cover:
				                        'https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg'
				                },
				                {
				                    id: '狂鼠9',
				                    index: 8,
				                    cover:
				                        'http://ztd00.photos.bdimg.com/ztd/w=700;q=50/sign=ea29fa95c13d70cf4cfaa80dc8e7a03d/42166d224f4a20a4d334946b98529822720ed070.jpg'
				                },
				                {
				                    id: '死神 10',
				                    index: 9,
				                    cover:
				                        'http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg'
				                },
				                {
				                    id: '禅雅塔 11',
				                    index: 10,
				                    cover:
				                        'http://pic2.zhimg.com/v2-1c9b73f260ea2652dcdedfc782fde90d_b.jpg'
				                },
				                {
				                    id: '黑百合 12',
				                    index: 11,
				                    cover:
				                        'http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg'
				                }
				            ],
							dataImg:[
								{img:"https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg",},
								{img:"http://pic2.zhimg.com/v2-1c9b73f260ea2652dcdedfc782fde90d_b.jpg"},
								{img:"http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg"},
								{img:"http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg"},
								{img:"http://ztd00.photos.bdimg.com/ztd/w=700;q=50/sign=ea29fa95c13d70cf4cfaa80dc8e7a03d/42166d224f4a20a4d334946b98529822720ed070.jpg"},
								{img:"https://pic3.zhimg.com/80/v2-f6ad5d21fda1459e4aa44fe0d6d644f6_720w.jpg"},
							],
							dataImg1:[
								{img:"https://pic1.zhimg.com/80/v2-0f3f99b94b80490a11fb867014565920_720w.jpg",},
								{img:"https://pic2.zhimg.com/80/v2-71d88f535a5acd1731d56ef6f8ce1175_720w.jpg"},
								{img:"https://pic3.zhimg.com/v2-7dbfb691e8e0c295c638a3ba863ffea2_b.jpg"},
								{img:"http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg"},
								{img:"https://pic4.zhimg.com/v2-3bdf9442cd55d69647b76d993a90b537_b.jpg"},
							],
				            previous: 0,
				            config5: [
				                {
				                    id: '-A',
				                    position: 'absolute',
				                    width: '22%',
				                    height: '72%',
				                    top: '19.2%',
				                    left: '-22%',
				                    opacity: 0,
				                    zIndex: 0,
				                    transition: '.4s'
				                },
				                {
				                    id: 'A',
				                    position: 'absolute',
				                    width: '22%',
				                    height: '72%',
				                    top: '19.2%',
				                    left: '0%',
				                    opacity: 1,
				                    zIndex: 1,
				                    transition: '.4s'
				                },
				                {
				                    id: 'B',
				                    position: 'absolute',
				                    width: '28%',
				                    height: '82%',
				                    top: '14%',
				                    left: '13%',
				                    opacity: 1,
				                    zIndex: 2,
				                    transition: '.4s'
				                },
				                {
				                    id: 'center',
				                    position: 'absolute',
				                    width: '45%',
				                    height: '100%',
				                    top: '0px',
				                    left: '50%',
				                    marginLeft: '-22.5%',
				                    opacity: 1,
				                    zIndex: 4,
				                    transition: '.4s'
				                },
				                {
				                    id: 'D',
				                    position: 'absolute',
				                    width: '28%',
				                    height: '82%',
				                    top: '14%',
				                    left: '61.8%',
				                    opacity: 1,
				                    zIndex: 2,
				                    transition: '.4s'
				                },
				                {
				                    id: 'E',
				                    position: 'absolute',
				                    width: '22%',
				                    height: '72%',
				                    top: '19.2%',
				                    left: '78%',
				                    opacity: 1,
				                    zIndex: 1,
				                    transition: '.4s'
				                },
				                {
				                    id: 'E+',
				                    position: 'absolute',
				                    width: '22%',
				                    height: '72%',
				                    top: '19.2%',
				                    left: '100%',
				                    opacity: 0,
				                    zIndex: 0,
				                    transition: '.4s'
				                }
				            ],
				lun:[{},{},{}]
			}
		},
		methods:{
		
			//登录
			ringUp(){
				if(this.msg == '') {
					this.$notify.error({
					  title: '请验证后再登录',
					  message: '点击按钮进行验证'
					});
				} else {
					sessionStorage.setItem('token',123456)
					this.$router.push({path:'/'})
				}
			},// 获取数据
			//登录验证
			showbtn(){
				this.show = true
			},
			onSuccess(){
				this.msg = '验证成功'
				this.verify = '验证成功'
				setTimeout(() => {
					this.show = false
				},2000)
			},
			onFail(){
				this.msg = ''
			},
			onRefresh(){
				this.msg = ''
			},
			async getData() {
				this.$nextTick(() => {
					this.loading = false;
				});
			},
			// 滑动上一个
			prev(index) {
				// this.imgs.unshift(this.imgs.pop());
				this.config5.push(this.config5.shift());
				this.currentIndex = this.currentIndex - 1;
				if (this.currentIndex < 0) {
					this.currentIndex = this.imgs.length - 1;
				}
				this.centerCard();
				this.centerIndex('prev');
				
			},
			// 滑动下一个
			next() {
				// this.imgs.push(this.imgs.shift());
				this.config5.unshift(this.config5.pop());
				this.currentIndex = this.currentIndex + 1;
				if (this.currentIndex > this.imgs.length - 1) {
					this.currentIndex = 0;
				}
				this.centerCard();
				this.centerIndex('next');
				// console.log(this.currentIndex);
				var that = this
				setTimeout(() => {
					that.next()
				},2000)
			},
			// 开始移动端滑动屏幕
			start(event) {
				this.startX = event.changedTouches[0].clientX;
				this.startY = event.changedTouches[0].clientY;
			},
			// 连续滑动
			move(event) {
				this.endY = event.changedTouches[0].clientY;
				this.endX = event.changedTouches[0].clientX;
				this.stopDefault(event);
	// 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
				this.interval = this.endX - this.startX;
				if (this.interval > 40) {
					this.startX = this.endX;
					this.prev();
				}
				if (this.interval < -40) {
					this.startX = this.endX;
					this.next();
				}
			},
			// 滑动
			end(event) {
	// 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
				// this.endY = event.changedTouches[0].clientY;
				// this.endX = event.changedTouches[0].clientX;
				// this.formatSwiper();
			},
			formatSwiper() {
				if (this.startX > this.endX) {
					console.log('左边滑动');
					if (this.startX > this.endX + 40) {
						this.next();
					}
				} else {
					console.log('右边滑动');
					if (this.endX > this.startX + 40) {
						this.prev();
					}
				}
			},
			// 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
			stopDefault(event) {
				let differenceY = this.endY - this.startY;
				let differenceX = this.endX - this.startX;
				if (Math.abs(differenceX) > Math.abs(differenceY)) {
					event.preventDefault();
				}
			},
			// 当前imgs在位置上的index（并非img数组的index）
			centerIndex(val) {
				if (val == 'prev') {
					for (let val of this.imgs) {
						if (val.index == this.imgs.length - 1) {
							val.index = 0;
						} else {
							val.index = val.index + 1;
						}
					}
				} else {
					for (let val of this.imgs) {
						if (val.index == 0) {
							val.index = this.imgs.length - 1;
						} else {
							val.index = val.index - 1;
						}
					}
				}
			},
			// 点击
			chooseItem(item, index) {
				let cycles = item.index;
				if (item.index < 3) {
					for (let i = 0; i < 3 - cycles; i++) {
						console.log(item.index);
						this.prev();
					}
				} else if (item.index > 3) {
					for (let i = -1; i < item.index - 3; i++) {
						this.next();
					}
				} else if (item.index == 3) {
					console.log('投票');
				}
			},
			// 计算中间卡片信息
			centerCard() {
				this.centerInfo = this.imgs[this.currentIndex];
				this.$emit('centerInfo', this.centerInfo);
				// this.$emit('centerInfo', this.centerInfo);
				// console.log(this.imgs[2].id);
			},

			addCardStyle() {
				if (this.imgs.length > 7 ) {
					let addtime = this.imgs.length - 7;
					for (let i = 0; i < addtime; i++) {
						console.log('add');
						this.config5.push({
							id: 'center',
							position: 'absolute',
							width: '45%',
							height: '100%',
							top: '0px',
							left: '50%',
							marginLeft: '-22.5%',
							opacity: 0,
							transition: '.1s'
						});
					}
				}
			}
		},
		watch:{
		
		},
		mounted() {
			
		},
		created() {
			this.getData();
			this.centerCard(); // 获取中间卡片信息
			this.addCardStyle();// 加入样式位置的index
			this.next()
		}
	}
</script>

<style>
	.el-carousel__arrow {
		width: 60px;
		height: 60px;
		background-color: #9ACCF4;;
		background: #9ACCF4;
		font-size: 35px;
	}
</style>

<style lang="scss" scoped="scoped">
	 
	
	.login_liu{
		
	}
	 ul, ul li
	        {
	            list-style: none;
	        }
	        .clear
	        {
	            clear: both;
	        }       
	        .box
	        {
	            position: relative;
	            width: 830px;
				background-color: blue;
	            margin: 0px auto;
				// margin-top: -130px;
				margin-left: 70px;
	        }
	        .lineF, .lineS
	        {
	            position: absolute;
	            visibility: hidden;
	        }
			 .lineF{
				 left: 100px;
				 top: 10px;
			 }
	        .lineS
	        {
	            top:105px;
	            left: 45px;
	        }
	        .boxF, .boxS, .boxT, .overlay
	        {
	            width: 100px;
	            height: 150px;
	            overflow: hidden;
				img{
					width: 100%;
					height: 100%;
				}
	        }
	        .boxF, .boxS
	        {
	            visibility: hidden;
	        }
	        .boxF
	        {
	            transform: rotate(120deg);
	            float: left;
	            margin-left: 10px;
	            -ms-transform: rotate(120deg);
	            -moz-transform: rotate(120deg);
	            -webkit-transform: rotate(120deg);
	        }
	        .boxS
	        {
	            transform: rotate(-60deg);
	            -ms-transform: rotate(-60deg);
	            -moz-transform: rotate(-60deg);
	            -webkit-transform: rotate(-60deg);
	        }
	        .boxT
	        {
				border-radius: 10px;
	            transform: rotate(-60deg);
	            background: no-repeat 50% center;
	            background-size: 125% auto;
	            -ms-transform: rotate(-60deg);
	            -moz-transform: rotate(-60deg);
	            -webkit-transform: rotate(-60deg);
	            visibility: visible;
	        }
	        .overlay
	        {
	            transition: all 250ms ease-in-out 0s;
	            display: none;
	            position: relative;
				background-color: rgba(0,0,0,0.6);
	        }
	        .overlay:hover
	        {
	            background-color: rgba(0,0,0,0.6);
	        }
	        .boxT:hover .overlay
	        {
	            display: block;
	        }
	  
	.login_yuan{
		width: 65px;
		height: 65px;
		background: #9ACCF4;
		transform: matrix(-1, 0, 0, 1, 0, 0);
		border-radius: 50%;
		text-align: center;
		color: #FFFFFF;
		font-size: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.left{
		position: absolute;
		right: 0;
	}
	.right{
		position: absolute;
		left: 0;
	}
	.login_bottom{
		// background-color: red;
		height: 400px;
		display: flex;
		align-items: center;
		width: 1000px;
		margin: 0 auto;
		position: relative;
	}
	.el-scrollbar__thumb {
		display: none;
	}
	.el-scrollbar__wrap {
		overflow-x: hidden;
		overflow-y: auto;
		::-webkit-scrollbar {
		    width: 0 !important;
		  }
		  ::-webkit-scrollbar {
		    width: 0 !important;height: 0;
		  }
	}
	
	.login_top{
		padding: 60px 0;
	}
	.yan{
		 position: absolute;z-index: 100; top: -225px; 
		 box-shadow: 2px 2px 2px #e3e3e3;
	}
	.swiper {
	    width: 894px;
	    height: 400px;
		margin: 0 auto;
	    position: relative;
	    overflow: hidden;
		cursor: pointer;
	    div {
	        opacity: 0;
	    }
	}
	.login_xiao{
		padding: 60px 0;
		background: #F3F4F6;
		width: 100%;
	}
	.login_LiImg{
		width: 283px;
		height: 429px;
		position: relative;
		margin-right: 1%;
		box-shadow: 3px 3px 3px #eff5fa;
		border-radius: 10px;
		img{
			width: 100%;
			height: 100%;
		}
		.wen{
			position: absolute;
			bottom: 20px;
			padding: 0 15px;
		}
	}
	.login_LiImg:last-child{
		margin-right: 0px;
	}
	.login_gif{
		width: 100%;
		background: #fafafa;
		padding: 60px 0;
	}
	.card{
		width: 894px;
		margin: 80px auto;
	}
	
	.login_video{
		margin-top: 60px;
	}
	.login_video1{
		padding: 60px 0;
		width: 100%;
		height: 100%;
		background: #F3F4F6;
	}
	.video{
		width: 894px;
		height: 451px;
		border-radius: 5px;
		margin-top: 60px;
	}
	.login_biao{
		font-size: 30px;
	}
	.btn{
		width: 100%;
		border: 1px solid #32b6fe;
		color: #32b6fe;;
	}
	.btnc{
		background-color:  #32b6fe;
		color: #ffffff;
		width: 100%;
	}
	.line{
		
		z-index: 100;
		// position: absolute;
		height: 380px;
		width: 2px;
		left: 49%;
		top: 180px;
	}
	.login_logo{
		z-index: 100;
		height: 130px;
		width: 440px;
		margin-left: 38px;
		// position: absolute;
	}
	.login_img{
		width: 100%;
		height: 100%;
	}
	.page{
		width: 100%;
		height: 730px;
		position: relative;
		background: url('https://mlearning-tools.pingan.com.cn/learn/cwtools/static/login/images/video_first.jpg');
		// background-color: #626262;
	}
	.login_inp{
		width: 450px;
		height: 360px;
		background: #ffffff;
		border-radius: 5px;
		// position: absolute;
		z-index: 100;
		right: 430px;
		top: 190px;
	}
</style>
